<script setup lang="ts">
import Section from '@/components/Section/index.vue'
import { computed, defineProps, ref } from 'vue'
import ItemAsCard from '@/components/item-as-card/index.vue'
let props = defineProps({
  relatives: {
    type: Object
  },
  en: {
    type: String
  },
  zh: {
    type: String
  },
  iconName: {
    type: String
  },
  showb: {
    type: Boolean
  },
  layout:{
    type: String,
    default:'1'
  },
  detail_url: {
    type: String,
    default: ''
  },
  collect_url: {
    type: String,
    default: ''
  },
  cancel_collect_url: {
    type: String,
    default: ''
  }
})

const content_1_2 = computed(()=>{
  return props.layout=='1'
})

const content_1_1 = computed(()=>{
  return props.layout=='2'
})
let imageSize = ref('320rpx')
</script>

<template>
  <view :class="{ 'content-1-2': content_1_2 ,'content-1-1': content_1_1}">
      <ItemAsCard
        v-for="item in relatives"
        :item="item"
        :isCollect="item.is_collected"
        :enableCollect="item.enable_collect"
        :enableShare="item.enable_share"
        :enableNavigate="item.enable_navigate"
        :codeVisibility="item.code_visibility"
        :cancel_collect_url="props.cancel_collect_url"
        :collect_url="props.collect_url"
        :detail_url="props.detail_url"
        class="item"
      />
    </view>
</template>

<style scoped lang="scss">
.content-1-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 每行两个元素 */
  gap: 20rpx;
  padding-bottom: 20rpx;
}

.content-1-1 {
  display: grid;
  // grid-template-columns: repeat(2, 1fr); /* 每行两个元素 */
  gap: 20rpx;
  padding-bottom: 20rpx;
}
</style>
